<template>
        <el-card class="basic-container">
            <!--搜索插槽-->
            <slot v-if="hasSearchSlot" name="search"></slot>
            <div v-else class="tools">
                <search-form v-if="searchFilter" :searchFilter="searchFilter" @search="onSearch"></search-form>
                <div style="display:flex;height: 32px;justify-items: center;">
                    <slot name="tools"></slot>
                    <el-tooltip v-if="showTools"  class="item block" effect="dark" content="新增" placement="top-start">
                        <el-button icon="el-icon-plus" circle @click="onAdd"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item block" effect="dark" content="刷新" placement="top-start">
                        <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
                    </el-tooltip>
                </div>
            </div>
            <!--表格前端显示统计数据-->
            <el-table :data="list"
                   row-key="id"
                   :indent="30"
                   :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column v-if="showSelection" type="selection" width="55"></el-table-column>
                <el-table-column
                        v-for="(item,index) in cols"
                        :key="index"
                        :label="item.title"
                        :width="item.width"
                >
                    <template slot-scope="scope">
                        <!-- table switch -->
                        <bw-column :item="item" :row="scope.row" @update="onSave"></bw-column>
                    </template>
                </el-table-column>
                <el-table-column v-if="options.length >0" label="操作">
                    <template slot-scope="scope">
                        <template  v-for="(item,k) in options">
                            <el-button
                                    v-if="!item.validate || item.validate(scope.row)"
                                    :key="k"
                                    :type="item.type"
                                    size="small"
                                    @click="reflect(item,scope.row)"
                            >{{item.label}}
                            </el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <!--编辑Dialog-->
            <edit-form ref="editForm" :rule="editForm" @onSave="onSave"></edit-form>
        </el-card>
</template>
<script>
    // import utils from '~/plugins/utils'
    import SearchForm from "./SearchForm";
    import BwColumn from "./BwColumn";
    import EditForm from "./EditFormNext";

    export default {
        name: "CrudTable",
        components: {
            SearchForm,
            BwColumn,
            EditForm
        },
        props: {
            apiModel: String,
            cols: {
                type: Array | Object,
                default: () => [],
            },
            searchFilter:{
                type: Array | Object,
                default: () => [],
            },
            editForm: {
                type: Array | Object,
                default: () => [],
            },
            options: {
                type: Array | Object,
                default: () => [],
            },
            showTools: {
                type: Boolean,
                default: true,
            },
            showSelection: {
                type: Boolean,
                default: false,
            },
        },
        beforeMount() {
            if (this.editForm) {
                this.editForm.forEach((val) => {
                    if (val.dataType && val.dataType === "array") {
                        this.$set(this.postForm, val.field, []);
                    } else {
                        this.$set(this.postForm, val.field, "");
                    }
                });
                //resolve(this.editForm)
            }
        },
        data() {
            return {
                list: [],
                listLoading: true,
                editDialog: false,
                postForm: {
                    id: 0,
                },
                listQuery: {

                },
                multipleSelection: [],
            };
        },
        computed: {
            hasSearchSlot() {
                return (this.$slots["search"] && this.$slots["search"].length > 0);
            },
        },
        created() {
            this.getList();
        },
        methods: {
            refresh() {
                this.getList();
            },
            async getList() {
                //this.listQuery = this.$filters.filterParams(this.listQuery);
                this.listLoading = true;
                const ret = await this.$http.get(this.apiModel,{
                    params:this.listQuery
                })
                this.list = ret.data;
                //this.total = ret.data.total ? ret.data.total : 0;
                this.listLoading = false;
            },
            async onSearch(formData) {
                this.$emit('onSearch',formData);
                this.getList();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.$emit("select", val);
            },
            /*函数调用中转*/
            reflect(item, params) {
                let method = item.method
                //调用方法存在该组件 直接调用否在上级组件调用
                if (Object.keys(this).includes(method)) {
                    this[method](params);
                } else {
                    if (typeof item.method === 'function'){
                        item.method(params);
                    }else{
                        this.$emit(method, params);
                    }
                }
            },
            onAdd() {
                if (Object.keys(this.$listeners).includes("add")) {
                    this.$emit("add");
                } else {
                    console.log('add')
                    //this.$refs.editForm.fApi.resetFields();
                    this.$refs.editForm.editDialog = true;
                }
            },
            onEdit(row) {
                this.$refs.editForm.value = row;
                this.$refs.editForm.editDialog = true;
            },
            //更新
            async onSave(item) {
                let ret = null;
                if (item.id > 0) {
                    ret = await this.$http.put(this.apiModel + "/" + item.id,item)
                }else{
                    ret = await this.$http.post(this.apiModel,item)
                }
                //let {data} = ret
                if (ret.data.type === 'success') {
                    this.$refs.editForm.editDialog = false;
                    this.getList();
                }
                this.$message(ret.data);
            },
            onDelete(row) {
                // utils.onDelete(this.apiModel + "/" + row.id, "getList", this);
            },
        },
    };
</script>
<style lang="scss" scoped>
    .tools {
        padding: 10px 0 0 0;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }
    .box-card{
        margin-bottom: 10px;
    }
</style>